<title>设置权限 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">
<style>
    .padding-null{
        padding: 0 !important;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="card-title">设置权限</div>
                </header>
                <div class="card-body">
                    <form id="example-from" action="#!" method="post">
                        <div class="form-group col">
                            <label for="gid">角色名称</label>
                            <select name="gid" id="gid" class="exampleSelect" data-search="true">
                                <option value="0">请选择角色</option>
                                {volist name="role" id="v"}
                                <option value="{$v.id}" {$v.id == values('gid', 0) ? 'selected' : ''} >{$v.name}</option>
                                {/volist}
                            </select>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="check-all">
                                            <label class="form-check-label" for="check-all">全选(点击空白可展开)</label>
                                        </div>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                {$html|raw}
                                </tbody>
                            </table>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary me-1">保 存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--表单验证-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/jquery-validate/messages_zh.min.js"></script>
<!--加载动画插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/lyear-loading.js"></script>

<script>
    $(function(){
        let $exampleFrom = $('#example-from');
        $exampleFrom.submit(function(){
            event.preventDefault();
        });

        $exampleFrom.validate({
            focusInvalid: false,  // 禁用无效元素的聚焦
            rules: {
                'mid': {
                    required: true,
                },
            },
            errorPlacement: (error, element) => {
                var $parent = $(element).parents('.form-group');
                if ($parent.find('.invalid-feedback').length) {
                    return;
                }
                $(element).addClass('is-invalid');
                $parent.append(error.addClass('invalid-feedback'));
            },
            highlight: (element) => {
                var $el = $(element);
                if ($el.hasClass('js-tags-input')) {
                    $el.next('.tagsinput').addClass('is-invalid');  // tags插件所隐藏的输入框没法实时验证，比较尴尬
                }
            },
            unhighlight: (element) => {
                $(element).next('.tagsinput').removeClass('is-invalid');
                $(element).removeClass('is-invalid');
            },
            submitHandler: (form) => {
                let l = $('body').lyearloading({
                    opacity: 0.2,
                    spinnerSize: 'lg'
                });
                post("{:url('/admin/auth/save')}", $(form).serialize()).success(res => {
                    if(res.code === 200){
                        setTimeout(function () {
                            l.destroy();
                            $('.close-btn').click();
                            parent.refreshTable();
                        }, 500);
                    }else{
                        l.destroy();
                    }
                }).error();
            }
        });

        $('#gid').change(function(){
            location.href='{:url("/admin/auth")}?gid=' + this.value;
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        //动态选择框，上下级选中状态变化
        $('input.checkbox-parent').on('change', function () {
            var dataid = $(this).attr("dataid");
            $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
        });

        $('input.checkbox-child').on('change', function () {
            var dataid = $(this).attr("dataid");
            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
            var parent = $('input[dataid=' + dataid + ']');
            if ($(this).is(':checked')) {
                parent.prop('checked', true);
                //循环到顶级
                while (dataid.lastIndexOf("-") != 2) {
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    parent = $('input[dataid=' + dataid + ']');
                    parent.prop('checked', true);
                }
                //更新当前节点的子节点状态
                $('input[dataid^=' + $(this).attr("dataid") + '-]').prop('checked', true);
            } else {
                //父节点取消选中
                if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
                    parent.prop('checked', false);
                }
                //更新当前节点的子节点状态
                $('input[dataid^=' + $(this).attr("dataid") + '-]').prop('checked', false);
            }
        });

        //下拉框更新样式
        $('.exampleSelect').each(function() {
            var $this = $(this);
            $this.lyearSelect({
                width: $this.data('width') ? $this.data('width') : '', // width示例：75px、50%
                placeholder: $this.data('placeholder') ? $this.data('placeholder') : '请选择',
                search: $this.data('search') ? $this.data('search') : false,
            });
        });
    });
</script>